<template>
	<view>
		<!-- <view class="is_inform">
			开启业绩消息，收到业务提醒
			<text>开启通知</text>
		</view> -->
		<view class="shop-perfor">
			<view class="explain-title">
				<view class=""></view>
				<view class="">
					店铺总业绩
				</view>
			</view>
			<view class="performance-today-msg" style="justify-content: space-between;padding: 0 30upx;text-align: center;">
				<view class="all-perfor">
					<view class="">¥{{allPerfor.total}}</view>
					<view class="">成交额(元)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{allPerfor.num}}</view>
					<view class="">成交数(个)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{allPerfor.people}}</view>
					<view>客户数(人)</view>
				</view>
			</view>
			<view class="derive-msg" @click="excelClick" :data-clipboard-text="downLoad">
				一键导出成交客户信息
			</view>
		</view>
		<view class="perfor-details first-style" @click="checkToday">
			<view class="act_explain-title">
				<view class="explain-title-none">
					<view class=""></view>
					<view class="">
						今日业绩
					</view>
				</view>
				<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
			</view>
			<view class="recommend-coupon-content">
				<view class="recommend-coupon-details">
					<view class="">¥{{todayPerfor.total}}</view>
					<view class="">成交额(元)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="recommend-coupon-details">
					<view class="">{{todayPerfor.num}}</view>
					<view class="">成交数(个)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="recommend-coupon-details">
					<view class="">{{todayPerfor.people}}</view>
					<view>客户数(人)</view>
				</view>
			</view>
		</view>
		<view class="perfor-details" v-for="(item,index) in otherPerfor" :key='index' @click="checkPerfor(item)">
			<view class="act_explain-title">
				<view class="explain-title-none">
					<view class=""></view>
					<view class="">
						{{item.date_added}}
					</view>
				</view>
				<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
			</view>
			<view class="recommend-coupon-content">
				<view class="recommend-coupon-details">
					<view class="">¥{{item.total}}</view>
					<view class="">成交额(元)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="recommend-coupon-details">
					<view class="">{{item.num}}</view>
					<view class="">成交数(个)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="recommend-coupon-details">
					<view class="">{{item.people}}</view>
					<view>客户数(人)</view>
				</view>
			</view>
			<!-- <view class="performance-today-msg">
				<view class="common-style before-perfor" v-for="(item,index) in performanceMsg" :key='index'>
					<text>{{item.value}}<text class="point">{{item.point}}</text></text>
					<text>{{item.name}}</text>
				</view>
				<view class="line before-perfor-line"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {formatChatTime} from '@/common/util.js'
	import Clipboard from 'clipboard'
	export default{
		data(){
			return{
				imglink: this.$store.state.imgLink,
				performanceMsg:[
					{name:'成交额(元)',value:'¥829000.',point:'00'},
					{name:'订单数(个)',value:'1200'},
					{name:'客户数(人)',value:'380'},
				],
				todayPerfor:'',
				allPerfor:'',
				otherPerfor:[],
				store_id:"",
				downLoad:''
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
		},
		onShow() {
			this.gainStoreData()
		},
		methods:{
			checkPerfor(item){
				uni.setStorageSync('perforTime' , item.date_added)
				uni.navigateTo({
					url:'perforTodayDetails/perforTodayDetails?store_id=' + this.store_id + '&time=' + item.date_added
				})
			},
			// #ifdef H5
				excelClick(){
					this.downLoad = this.$store.state.URL + '/order/order/get_salesroom_excel?store_id=' + this.store_id
					const clipboard = new Clipboard('.derive-msg')
					clipboard.on('success', (e) => {
						uni.showToast({
							title:'下载链接已复制，请前往浏览器下载！',
							icon:'none',
							duration:2000
						})
					  clipboard.destroy()
					})
					clipboard.on('error', () => {
					  clipboard.destroy()
					})
					// uni.downloadFile({
					// 	url:this.$store.state.URL + '/order/order/user_excel',
					// 	success:(res) => {
					// 		console.log(res)
					// 		if (res.statusCode === 200) {
					// 			uni.showToast({
					// 				title:'下载成功',
					// 				icon:'none',
					// 				duration:2000
					// 			})
					// 		}
					// 	}
					// })
					// let data = {
					// 	token:this.$store.getters.getToken
					// }
					// this.$api.axcel_msg(data).then(res => {
					// 	console.log(res)
					// }).catch(err => {
					// 	console.log(err)
					// })
				},
			// #endif
			// #ifdef MP-WEIXIN
				excelClick() {
					uni.setClipboardData({
						data: this.$store.state.URL + '/order/order/get_salesroom_excel?store_id=' + this.store_id,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
									uni.showToast({
										title:'下载链接已复制，请前往浏览器下载！',
										icon:'none',
										duration:2000
									})
								}
							})
						}
					})
				},
			// #endif
			gainStoreData(){
				let data ={
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					page:1,
					pagesize:10
				}
				this.$api.gain_store_perfor(data).then(res => {
					console.log(res)
					if(res.status){
						this.todayPerfor = res.data.today
						this.allPerfor = res.data.all
						this.otherPerfor = res.data.info
						// this.otherPerfor.forEach(item => {
						// 	let timeConvert = new Date(item.date).getTime()
						// 	// item.date = formatChatTime(timeConvert)
						// })
					}
				}).catch(err => {
					console.log(err)
				})
			},
			checkToday(){
				uni.navigateTo({
					url:'perforTodayDetails/perforTodayDetails?store_id=' + this.store_id + '&time=today'
				})
			},
			actPerfor(){
				uni.navigateTo({
					url:'./actPerforAll/actPerforAll?store_id=' + this.store_id
				})
			}
		}
	}
</script>

<style>
	.recommend-coupon-content{
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 40upx 0 30upx;
		box-sizing: border-box;
	}
	.recommend-coupon-details{
		flex-grow: 1;
		text-align: center;
	}
	.recommend-coupon-details>view:first-child{
		color: #333333;
		font-size: 36upx;
	}
	.recommend-coupon-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.recommend-coupon-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 22upx;
	}
	page{
		background: #F3F3F4;
	}
	.is_inform{
		width: 100%;
		height: 56upx;
		line-height: 56upx;
		background: #FFF7D8;
		text-align: center;
		font-size: 24upx;
		color: #666666;
	}
	.is_inform>text{
		display: inline-block;
		width: 128upx;
		height: 38upx;
		line-height: 38upx;
		border: 2upx solid #FF8B46;
		border-radius: 2upx;
		color: #FF8B46;
		font-size: 24upx;
		margin-left: 30upx;
	}
	.shop-perfor{
		width: 100%;
		height: 432upx;
		background: linear-gradient(to left,#FDAF21,#FF7B50);
		padding: 38upx 30upx;
		box-sizing: border-box;
	}
	.explain-title{
		display: flex;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FFFFFF;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #FFFFFF;
		font-size: 30upx;
		margin-left: 16upx;
	}
	.performance-today-msg{
		margin-top: 38upx;
		display: flex;
		position: relative;
	}
	.common-style:nth-child(1){
		margin-left: 26upx;
	}
	.common-style:nth-child(2){
		margin: 0 84upx;
	}
	.common-style:nth-child(3){
		margin-left: 54upx;
	}
	.common-style>text{
		display: block;
		text-align: center;
	}
	.common-style>text:first-child{
		color: #FFFFFF;
		font-size: 36upx;
	}
	.common-style>text:last-child{
		color: rgba(255,255,255,0.8);
		font-size: 24upx;
	}
	.common-style .point{
		font-size: 28upx;
	}
	.all-perfor>view:first-child>text{
		font-size: 28upx;
	}
	.all-perfor>view:first-child{
		color:#FFFFFF;
		font-size: 36upx;
	}
	.all-perfor>view:last-child{
		color: rgba(255,255,255,0.8);
		font-size: 24upx;
	}
	.line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid rgba(239, 239, 239, 0.4);
		position: absolute;
		top: 20upx;left: 240upx;
	}
	.line:after{
		content: '';
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid rgba(239, 239, 239, 0.4);
		position: absolute;
		left: 248upx;
	}
	.derive-msg{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 32upx;
		color: #FF8B46;
		font-size: 32upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FFFFFF,#FFEAD3);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.first-style{
		border-radius: 24upx 24upx 0 0;
		margin-top: -66upx;
	}
	.perfor-details{
		width: 100%;
		height: 236upx;
		background: #FFFFFF;
		padding: 38upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title-none{
		display: flex;
	}
	.explain-title-none>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title-none>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
	}
	.act_explain-title>image{
		width: 18upx;
		height: 20upx;
		margin-top: 12upx;
	}
	.before-perfor>text:first-child{
		color: #333333;
	}
	.before-perfor>text:last-child{
		color: #999999;
	}
	.before-perfor-line{
		border-color: #EFEFEF;
	}
	.before-perfor-line:after{
		border-color: #EFEFEF;
	}
</style>
